<template>
	<view>
		<div class="albumWrap">
			<image class="album-cover" :src="baseInfo.picUrl" mode="widthFix"></image>
			<p class="album-des">{{baseInfo.description}}</p>
		</div>
		<musicList :musicArrayData="songList">
			<p slot="title">专辑歌曲(共{{songList.length}}首歌)</p>
		</musicList>
	</view>
</template>

<script>
	import musicList from '../../components/music-list.vue'
	export default {
		data() {
			return {
				baseInfo: {},
				songList: [],
			}
		},
		props: {

		},
		components: {
			musicList
		},
		methods: {
			async getAlbumDetails(id) {
				const res = await this.rq.fetchGet(this.apiUrl.albumContent, {
					id,
				})
				this.baseInfo = res[1].data.album;
				this.songList = res[1].data.songs.map(item => {
					return {
						id: item.id,
						name: item.name,
						song: {
							exclusive: item.h,
							artists: item.ar,
							album: item.al
						}
					}
				});
			}
		},
		created() {
			this.getAlbumDetails(this.options.id)
		}
	}
</script>

<style lang="scss">
	.albumWrap {
		position: relative;

		.album-cover {
			width: 100vw;
		}

		.album-des {
			position: absolute;
			bottom: 0rem;
			background-color: rgba($color: #000000, $alpha: .6);
			color: #FFFFFF;
			font-size: .6rem;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 4;
			line-clamp: 4;
			-webkit-box-orient: vertical;
			border-top-right-radius: 12px;
			border-top-left-radius: 12px;
			padding:0 .8rem;
		}
	}
</style>
